<template>
  <div class="wrapper">
    <div class="income-chart" @click="$emit('shwDeviceNum', 3)">
      <v-chart :options="incomeChartOptions" />
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    incomeChartData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  computed: {
    incomeChartOptions() {
      const res = this.incomeChartData
      if (res && res.sumItems) {
        const dataX = []
        const dataY = []
        const dataY2 = []
        // 组装总收入数据
        if (res) {
          // res = res.filter(item => item.incomeType === 0)
          res.sumItems.map(item => {
            dataX.push(item.weekName)
            dataY.push(item.totalIncome)
          })
          // 组装单机收入数据
          // res = res.filter(item => item.incomeType === 1)
          res.singleItems.map(item => {
            dataY2.push(item.totalIncome)
          })

          return {
            title: {
              text: '一周总收入',
              left: '0px',
              top: '0',
              bottom: '0px',
              textStyle: {
                color: '#666',
                fontSize: 16,
                fontWeight: '700'
              }
            },
            grid: {
              left: '30px',
              top: '60px',
              bottom: '40px',
              right: '12%'
            },
            // legend: {
            //   data: ['总收入', '单机收入']
            // },
            tooltip: {
              trigger: 'axis',
              formatter: params => {
                let str = params[0].name + '<br/>'
                params.forEach((item, index) => {
                  const unit = index === 0 ? '万元' : '元'
                  str += item.marker + item.seriesName + ': ' + parseFloat(item.data).toFixed(2) + unit + '<br/>'
                })
                return str
              }
            },
            xAxis: {
              type: 'category',
              data: dataX, // ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
              boundaryGap: false,
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#D1D1D1',
                  width: 0.5 // 这里是为了突出显示加上的
                }
              },
              axisLabel: {
                rotate: 60,
                textStyle: {
                  color: '#555',
                  fontSize: 12
                }
              }
            },
            yAxis: [
              {
                type: 'value',
                name: '总收入/万',
                // x: '45px',
                axisTick: {
                  show: false
                },
                axisLine: {
                  show: false,
                  lineStyle: {
                    color: '#D1D1D1',
                    width: 0.5 // 这里是为了突出显示加上的
                  }
                },
                axisLabel: {
                  textStyle: {
                    color: '#777',
                    fontSize: 12
                  }
                },
                nameTextStyle: {
                  color: '#8998AC',
                  padding: [0, 0, 0, 0]
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    width: 2,
                    color: '#f4f5f8' // 'rgb(245,245,245)' x轴网络线颜色
                  }
                }
              },
              {
                type: 'value',
                name: '单机收入/元',
                splitLine: { show: false },
                axisTick: {
                  show: false
                },
                axisLine: {
                  show: false
                },
                axisLabel: {
                  textStyle: {
                    color: '#f08519',
                    fontSize: 12
                  }
                },
                nameTextStyle: {
                  color: '#f08519',
                  padding: [0, 0, 0, 0]
                }
              }
            ],
            series: [
              {
                data: dataY, // [80, 130, 54, 199, 110, 246, 288],
                type: 'line',
                name: '总收入',
                left: '15px',
                symbol: 'circle', // 设置线图点为实心，重要
                lineStyle: {
                  width: 2,
                  color: '#3e65da'
                },
                areaStyle: {
                  color: '#f4f7fe'
                },
                itemStyle: {
                  opacity: 0,
                  width: 1,
                  color: '#3e65da'
                },
                smooth: true,
                yAxisIndex: 0 // 重要，双轴必须指定，0 代表归左侧Y轴
              },
              {
                data: dataY2, // [80, 130, 54, 199, 110, 246, 288],
                type: 'line',
                name: '单机收入',
                symbol: 'circle', // 设置线图点为实心，重要

                lineStyle: {
                  width: 2,
                  color: '#f08519'
                },
                itemStyle: {
                  width: 2,
                  color: '#f08519'
                },
                smooth: true,
                yAxisIndex: 1 // 重要，双轴必须指定，1 代表归右侧Y轴
              }
            ]
          }
        }
      }
      return null
    }
  },
  methods: {}
}
</script>
<style lang="scss" scoped>
.wrapper {
  .income-chart {
    height: 210px;
  }
}
</style>
